<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类选择器 */
        .span1 {
            font-weight: 900;
            font-size: 30px;
        }
        .span2 {
            background-color: aqua;
        }

        /* 后代选择器 */
        div span {
            color: blue;
        }
        div .inSpan {
            background-color:antiquewhite;
        }
    </style>
</head>
<body>
    <p>
        <span class="span1">Saepe optio distinctio earum</span>, magni provident voluptates quisquam commodi dolor, dignissimos ab nulla quos voluptate <span class="span1">temporibus</span> deleniti similique, reiciendis eveniet sed dolorum illum odit molestias quidem facilis amet! Laboriosam, omnis! Recusandae quae repellendus cumque, maxime porro, similique <span class="span2">laboriosam</span> quaerat veniam aliquam debitis saepe praesentium excepturi sit unde omnis? Eos rerum expedita esse iure hic sit non ab pariatur mollitia commodi nesciunt voluptate cupiditate explicabo nihil numquam vel quos optio <span class="span2">molestiae</span>, fugiat laborum aperiam magni. Quae ipsam et aperiam ipsum minus fuga veritatis cumque beatae nesciunt necessitatibus? Possimus et similique ad quas neque laboriosam ab commodi ipsa hic dignissimos omnis autem velit, <div>dolor impedit cum consequatur quisquam. Quos perferendis nisi iure optio quo, hic doloribus deserunt voluptas <span>architecto veritatis</span> itaque ipsam temporibus esse <span class="inSpan">  delectus aliquid</span> dolore, quisquam consequuntur velit</div>? Ex corporis nemo beatae harum, repellat eveniet alias ipsam recusandae ratione ea.\
    </p>
     
</body>
</html>